<script setup name="profile">
import {reactive, computed, ref} from "vue";
import {onShow,} from '@dcloudio/uni-app'
import storage from '@/utils/storage'
import BASE_URL from '@/utils/env'

const userInfo = ref(null)
const moduleList = reactive([
  {
    label: '我的地址',
    moduleIcon: '/static/images/address-icon.png',
    path: '/pages/address/address'
  },
  {
    label: '收支明细',
    moduleIcon: '/static/images/income-icon.png',
    path: '/pages/payRecords/payRecords'
  },
  {
    label: '评价中心',
    moduleIcon: '/static/images/review-icon.png',
    path: '/pages/review/review'
  },
  {
    label: '我的钱包',
    moduleIcon: '/static/images/moneypag-icon.png',
    path: '/pages/wallet/wallet'
  },
])
const serviceList = reactive([
  {
    label: '骑手认证',
    moduleIcon: '/static/images/confilication.png',
    path: '/pages/certification/certification'
  },
  {
    label: '骑手订单',
    moduleIcon: '/static/images/runner-order.png',
    path: '/pages/order/order?type=recevie'
  },
])
const handleToAddress = path => uni.navigateTo({url: path})
onShow(() => {
  userInfo.value = storage.get('userInfo')
})
const handleLogOut = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        storage.remove('userInfo')
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    }
  })
}
</script>

<template>
  <view class="profile-container">
    <view class="user-container">
      <up-image
          shape="circle"
          :src="`${BASE_URL}images/${userInfo.avatar}`"
          width="110px"
          height="100px"
          @click="click"
      />
      <up-text align="center" :text="userInfo?.username" size="20" bold  />
    </view>
    <view class="user-service">
      <view class="header">用户服务</view>
      <view class="service-content">
        <blockquote @click="() => handleToAddress(module.path)" class="service-item" v-for="module in moduleList"
                    :key="module.path">
          <up-image :src="module.moduleIcon" width="40px" height="40px"></up-image>
          <text class="text">{{ module.label }}</text>
        </blockquote>
      </view>
    </view>

    <view class="runner-service">
      <view class="header">骑手服务</view>
      <view class="service-content">
        <blockquote @click="() => handleToAddress(module.path)" class="service-item" v-for="module in serviceList"
                    :key="module.path">
          <up-image :src="module.moduleIcon" width="40px" height="40px"></up-image>
          <text class="text">{{ module.label }}</text>
        </blockquote>
      </view>
    </view>

    <view class="runner-service">
      <uni-list>
        <uni-list-item show-extra-icon showArrow :to="'/pages/myPage/myPage'" :extra-icon="{ type: 'person', size: 22 }"
                       title="个人信息" />
        <uni-list-item show-extra-icon showArrow :extra-icon="{ type: 'map', size: 22 }"
                       title="平台介绍" />
        <uni-list-item show-extra-icon showArrow :extra-icon="{ type: 'email', size: 22 }"
                       title="用户协议" />
      </uni-list>
    </view>
    <u-button @click="handleLogOut" class="logoutBtn" round type="primary">退出登录</u-button>
  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
}

.user-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40rpx 0;

  :deep(.u-text) {
    margin-top: 30rpx !important;
  }
}

.user-service, .runner-service {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);

  .header {
    color: $u-primary;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .service-content {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .text {
        margin-top: 15rpx;
        font-size: 25rpx;
      }
    }
  }
}

.runner-service {
  margin-top: 25rpx;
}

.logoutBtn {
  margin-top: 25rpx;
  border-radius: 35rpx;
  background-color: $u-error-dark;
  border: none;
}
</style>
